<template>
  <ul class="tree-container">
    <li class="tree-item" v-for="(item,index) in arr||list" :key="index">
      <div class="tree-content" ref="cell" :class="{active:item.active}" @click.stop="onClick(item.id)">
        {{item[name]}}-----{{item.maxHeight || 100}}
      </div>
      <Tree :arr="item[children]" v-if="item[children]" :style="{maxHeight:`${item.maxHeight||100}px`}"></Tree>
    </li>
  </ul>
</template>
<script>
export default {
  name: "Tree",
  props: {
    list: Array,
    arr: Array,
    name: {
      type: String,
      default: "name",
    },
    children: {
      type: String,
      default: "children",
    },
  },
  data() {
    return {
      sArr: null,
      id: null,
    };
  },
  created() {
    this.sArr = this.arr;
  },
  methods: {
    onClick(id) {
      console.log(id);
      this.$emit("click", id);
    },
  },
};
</script>
<style lang="scss" scoped>
.tree-container {
  // height: 30px;
  overflow: hidden;
  transition: all 0.3s linear;
  .tree-item {
    .tree-content {
      &.active {
        color: red;
      }
    }
  }
}
</style>